<template>
  <div>
    <basic-container>
      <div class="banner-text">
        <span>
          <a href="https://avue.top/#/pay" target="_blank">
            <img src="https://img.shields.io/badge/Element-2.13.6-green.svg" alt="Build Status">
          </a>
          <img src="https://img.shields.io/badge/Spring%20Boot-2.5.4-yellowgreen.svg" alt="Downloads">
          <img src="https://img.shields.io/badge/Spring%20Cloud-2020-blue.svg" alt="Coverage Status">
        </span>
        <br/>
        <span>
          <el-collapse v-model="activeNames">
            <!-- <div data-vjs-player>
              <video ref="videoNode" class="video-js vjs-default-skin">抱歉，您的浏览器不支持</video>
            </div> -->


            <el-collapse-item name="1">
              <div>基于Spring Cloud 2020</div>
              <div>基于Spring Boot 2.5.4</div>
            </el-collapse-item>
            <el-collapse-item name="2">
              <div>支持docker部署</div>
              <div>支持Rancher2 + Kubernetes部署</div>
            </el-collapse-item>
            <el-collapse-item name="3">
              <div>基于Spring Security OAuth 2.0 深度定制</div>
              <div>完美兼容2.X，优化集群部署，提升性能</div>
            </el-collapse-item>
            <el-collapse-item name="4">
              <div>深度定制 Spring Cloud Alibaba 便于开发使用</div>
              <div>完善监控流程，支持微服务全组件接入监控</div>
              <div><a href="https://pig4cloud.com" target="_blank">详细介绍</a></div>
            </el-collapse-item>
          </el-collapse>
        </span>
      </div>
      
      <el-button type="text" @click="playVideo('https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4')">查看1</el-button>
      <el-button type="text" @click="playVideo('http://vjs.zencdn.net/v/oceans.mp4');">查看2</el-button>
      
      <el-dialog
        :visible.sync="show_video_dlg"
        :show-close="false"
        width="800px"
        :before-close="handleClose"> <!-- width="80%" -->

        <div slot="title" class="head">
            <slot/>
        </div>

        <div class="video-body">
          <!-- controls：向用户显示播放按钮控件 -->
          <video
            ref="videoNode"
            class="video-js vjs-default-skin vjs-big-play-centered"
            width="800px"
            height="600px"
            controls
          >
            <!-- <source src="https://playtv-live.ifeng.com/live/06OLEGEGM4G.m3u8" /> -->
            <source src="https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4" />
          </video>
        </div>
      </el-dialog>

    </basic-container>
  </div>
</template>

<script>
  import {mapGetters} from 'vuex';

  // https://zhuanlan.zhihu.com/p/159095870
  import videojs from "video.js";
  // 如果要播放RTMP要使用flash 需要先npm i videojs-flash
  // import "videojs-flash";
  // 播放器中文，不能使用.js文件
  import videozhCN from "video.js/dist/lang/zh-CN.json";
  // 样式文件注意要加上
  import "video.js/dist/video-js.css"; 

  export default {
    name: 'wel',
    data() {
      return {
        activeNames: ['1', '2', '3', '4'],
        DATA: [],
        text: '',
        actor: '',
        count: 0,
        isText: false,
        player: null,
        show_video_dlg: false
      }
    },
    computed: {
      ...mapGetters(['website'])
    },
    //初始化播放器
    mounted(){
        let options = {
          // https://developer.chrome.com/blog/autoplay/
          //    chrome.exe --autoplay-policy=no-user-gesture-required
          //    chrome.exe --disable-features=PreloadMediaEngagementData, MediaEngagementBypassAutoplayPolicies
            // autoplay: true, //自动播放
            language: "zh-CN",
            controlBar: {
                'currentTimeDisplay':true,
                'timeDivider':true,
                'durationDisplay':true,
                'remainingTimeDisplay':false
            },
            // controls: this.controls, //控制条
            // preload: "auto", //自动加载
            // errorDisplay: true, //错误展示
            // // fluid: true, //跟随外层容器变化大小，跟随的是外层宽度
            width: "500px",
            height: "500px",
            // // controlBar: false,  // 设为false不渲染控制条DOM元素，只设置controls为false虽然不展示，但是存在
            // // textTrackDisplay: false,  // 不渲染字幕相关DOM
            // userActions: {
            //   hotkeys: true //是否支持热键
            // },
            // notSupportedMessage: "此视频暂无法播放，请稍后再试",
            // techOrder: ["h5","flash"],//定义Video.js技术首选的顺序
            // sources: [
            //   {
            //     // src: 'file:///G:/_ALL/JOB/WxWork/1688850962010012/Cache/Video/2022-04/后退直接到登陆.mp4',
            //     // src: 'http://39.134.65.162/PLTV/88888888/224/3221225611/index.m3u8',
            //     src: 'https://www.learningcontainer.com/wp-content/uploads/2020/05/sample-mp4-file.mp4',
            //     type: 'video/mp4',
            //     //type: 'rtmp/flv',
            //   }
            // ]
        };
        // this.$nextTick(() => {
        //   this.player = videojs(
        //       this.$refs.videoNode,
        //       // options,
        //       function onPlayerReady() {
        //         videojs.log(`Your player is ready!`);
        //       }
        //   );
        //   videojs.addLanguage("zh-CN", videozhCN);
        // });
    },
    beforeDestroy() {
        if (this.player) {
          this.player.dispose();
        }
    },
    methods: {
      handleClose(done) {
        console.log('handleClose');
        // this.player.dispose();
        this.player.pause();
        this.show_video_dlg = false;
      },
      playVideo(url) {
        this.show_video_dlg=true;

        this.$nextTick(() => {
          if (this.player == null) {
            this.player = videojs(
                this.$refs.videoNode,
                // options,
                function onPlayerReady() {
                  videojs.log(`Your player is ready!`);
                }
            );
            videojs.addLanguage("zh-CN", videozhCN);
          }
          console.log('playVideo', url);
          this.player.src({src:url});
          this.player.load(url);
          this.player.play(0.3);
        });
      },
      getData() {
        if (this.count < this.DATA.length - 1) {
          this.count++
        } else {
          this.count = 0
        }
        this.isText = true
        this.actor = this.DATA[this.count]
      },
      setData() {
        let num = 0
        let count = 0
        let active = false
        let timeoutstart = 5000
        let timeoutend = 1000
        let timespeed = 10
        setInterval(() => {
          if (this.isText) {
            if (count == this.actor.length) {
              active = true
            } else {
              active = false
            }
            if (active) {
              num--
              this.text = this.actor.substr(0, num)
              if (num == 0) {
                this.isText = false
                setTimeout(() => {
                  count = 0
                  this.getData()
                }, timeoutend)
              }
            } else {
              num++
              this.text = this.actor.substr(0, num)
              if (num == this.actor.length) {
                this.isText = false
                setTimeout(() => {
                  this.isText = true
                  count = this.actor.length
                }, timeoutstart)
              }
            }
          }
        }, timespeed)
      }
    }
  }
</script>

<style scoped="scoped" lang="scss">
  .wel-contailer {
    position: relative;
  }

  .banner-text {
    position: relative;
    padding: 0 20px;
    font-size: 20px;
    text-align: center;
    color: #333;
  }

  .banner-img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    opacity: 0.8;
    display: none;
  }

  .actor {
    height: 250px;
    overflow: hidden;
    font-size: 18px;
    color: #333;
  }

  .actor:after {
    content: '';
    width: 3px;
    height: 25px;
    vertical-align: -5px;
    margin-left: 5px;
    background-color: #333;
    display: inline-block;
    animation: blink 0.4s infinite alternate;
  }

  .typeing:after {
    animation: none;
  }

  @keyframes blink {
    to {
      opacity: 0;
    }
  }



  // .video-js{ /* 给.video-js设置字体大小以统一各浏览器样式表现，因为video.js采用的是em单位 */
  //   font-size: 14px;
  // }
  // .video-js button{
  //   outline: none;
  // }
  // .video-js.vjs-fluid,
  // .video-js.vjs-16-9,
  // .video-js.vjs-4-3{ /* 视频占满容器高度 */
  //   height: 100%;
  //   background-color: #161616;
  // }
  // .vjs-poster{
  //   background-color: #161616;
  // }
  // .video-js .vjs-big-play-button{ /* 中间大的播放按钮 */
  //   font-size: 2.5em;
  //   line-height: 2.3em;
  //   height: 2.5em;
  //   width: 2.5em;
  //   -webkit-border-radius: 2.5em;
  //   -moz-border-radius: 2.5em;
  //   border-radius: 2.5em;
  //   background-color: rgba(115,133,159,.5);
  //   border-width: 0.12em;
  //   margin-top: -1.25em;
  //   margin-left: -1.75em;
  // }
  // .video-js.vjs-paused .vjs-big-play-button{ /* 视频暂停时显示播放按钮 */
  //   display: block;
  // }
  // .video-js.vjs-error .vjs-big-play-button{ /* 视频加载出错时隐藏播放按钮 */
  //   display: none;
  // }
  // .vjs-loading-spinner { /* 加载圆圈 */
  //   font-size: 2.5em;
  //   width: 2em;
  //   height: 2em;
  //   border-radius: 1em;
  //   margin-top: -1em;
  //   margin-left: -1.5em;
  // }
  // .video-js .vjs-control-bar{ /* 控制条默认显示 */
  //   display: flex;
  // }
  // .video-js .vjs-time-control{display:block;}
  // .video-js .vjs-remaining-time{display: none;}

  // .vjs-button > .vjs-icon-placeholder:before{ /* 控制条所有图标，图标字体大小最好使用px单位，如果使用em，各浏览器表现可能会不大一样 */
  //   font-size: 22px;
  //   line-height: 1.9;
  // }
  // .video-js .vjs-playback-rate .vjs-playback-rate-value{
  //   line-height: 2.4;
  //   font-size: 18px;
  // }
  // /* 进度条背景色 */
  // .video-js .vjs-play-progress{
  //   color: #ffb845;
  //   background-color: #ffb845;
  // }
  // .video-js .vjs-progress-control .vjs-mouse-display{
  //   background-color: #ffb845;
  // }
  // .vjs-mouse-display .vjs-time-tooltip{
  //   padding-bottom: 6px;
  //   background-color: #ffb845;
  // }
  // .video-js .vjs-play-progress .vjs-time-tooltip{
  //   display: none!important;
  // }



  // .el-dialog__header {
  //   // padding: 0px !important;
  //   display: none!important;
  // }

  .head {

  //   background-color: #2C3E50;
    // margin: -20px -30px -100px -30px;
    // padding-bottom: 200px;
  //   border-radius: 10px;

  }
  .video-body {
    margin: -60px -20px -30px -20px;
    // padding: -20px -30px -20px -30px;
  }
</style>
